<template>
  <view class="container">
      <div class="app-container" style="overflow: auto">
  <div class="header-con" ref="searchHeightRef">
    <div class="item">
      <img src="@/static/images/one.png" alt="" />
      <div class="info-sum">
        <div class="title">今日交易次数</div>
        <div class="num">{{ debitCardAnalysis.todayCount }}<span>次</span></div>
      </div>
    </div>
    <div class="item" >
      <img src="@/static/images/ticketSum.png" alt="" />
      <div class="info-sum">
        <div class="title">今日刷卡金额</div>
        <div class="num">{{ debitCardAnalysis.todayAmount }}<span>元</span></div>
      </div>
    </div>
  </div>
  <div class="header-con" ref="searchHeightRef">
    <div class="item">
      <img src="@/static/images/one.png" alt="" />
      <div class="info-sum">
        <div class="title">近7日交易次数</div>
        <div class="num">{{ debitCardAnalysis.sevenDayCount }}<span>次</span></div>
      </div>
    </div>
    <div class="item" >
      <img src="@/static/images/ticketSum.png" alt="" />
      <div class="info-sum">
        <div class="title">近7日刷卡金额</div>
        <div class="num">{{ debitCardAnalysis.sevenDayAmount }}<span>元</span></div>
      </div>
    </div>
  </div>
  <div class="header-con" ref="searchHeightRef">
    <div class="item">
      <img src="@/static/images/one.png" alt="" />
      <div class="info-sum">
        <div class="title">近1月交易次数</div>
        <div class="num">{{ debitCardAnalysis.oneMonthCount }}<span>次</span></div>
      </div>
    </div>
    <div class="item" >
      <img src="@/static/images/ticketSum.png" alt="" />
      <div class="info-sum">
        <div class="title">近1月刷卡金额</div>
        <div class="num">{{ debitCardAnalysis.oneMonthAmount }}<span>元</span></div>
      </div>
    </div>
  </div>
  <div class="header-con" ref="searchHeightRef">
    <div class="item">
      <img src="@/static/images/one.png" alt="" />
      <div class="info-sum">
        <div class="title">近3月交易次数</div>
        <div class="num">{{ debitCardAnalysis.threeMonthCount }}<span>次</span></div>
      </div>
    </div>
    <div class="item" >
      <img src="@/static/images/ticketSum.png" alt="" />
      <div class="info-sum">
        <div class="title">近3月刷卡金额</div>
        <div class="num">{{ debitCardAnalysis.threeMonthAmount }}<span>元</span></div>
      </div>
    </div>
  </div>
  <div class="header-con" ref="searchHeightRef">
    <div class="item">
      <img src="@/static/images/one.png" alt="" />
      <div class="info-sum">
        <div class="title">近6月交易次数</div>
        <div class="num">{{ debitCardAnalysis.sixMonthCount }}<span>次</span></div>
      </div>
    </div>
    <div class="item" >
      <img src="@/static/images/ticketSum.png" alt="" />
      <div class="info-sum">
        <div class="title">近6月刷卡金额</div>
        <div class="num">{{ debitCardAnalysis.sixMonthAmount }}<span>元</span></div>
      </div>
    </div>
  </div>
  <div class="header-con" ref="searchHeightRef">
    <div class="item">
      <img src="@/static/images/one.png" alt="" />
      <div class="info-sum">
        <div class="title">近1年交易次数</div>
        <div class="num">{{ debitCardAnalysis.oneYearCount }}<span>次</span></div>
      </div>
    </div>
    <div class="item" >
      <img src="@/static/images/ticketSum.png" alt="" />
      <div class="info-sum">
        <div class="title">近1年刷卡金额</div>
        <div class="num">{{ debitCardAnalysis.oneYearAmount }}<span>元</span></div>
      </div>
    </div>
  </div>
  <div class="header-con" ref="searchHeightRef">
    <div class="item">
      <img src="@/static/images/one.png" alt="" />
      <div class="info-sum">
        <div class="title">近2年交易次数</div>
        <div class="num">{{ debitCardAnalysis.twoYearCount }}<span>次</span></div>
      </div>
    </div>
    <div class="item" >
      <img src="@/static/images/ticketSum.png" alt="" />
      <div class="info-sum">
        <div class="title">近2年刷卡金额</div>
        <div class="num">{{ debitCardAnalysis.twoYearAmount }}<span>元</span></div>
      </div>
    </div>
  </div>
  <div class="header-con" ref="searchHeightRef">
    <div class="item">
      <img src="@/static/images/one.png" alt="" />
      <div class="info-sum">
        <div class="title">近5年交易次数</div>
        <div class="num">{{ debitCardAnalysis.fiveYearCount }}<span>次</span></div>
      </div>
    </div>
    <div class="item" >
      <img src="@/static/images/ticketSum.png" alt="" />
      <div class="info-sum">
        <div class="title">近5年刷卡金额</div>
        <div class="num">{{ debitCardAnalysis.fiveYearAmount }}<span>元</span></div>
      </div>
    </div>
  </div>
  <div class="header-con" ref="searchHeightRef">
    <div class="item">
      <img src="@/static/images/one.png" alt="" />
      <div class="info-sum">
        <div class="title">总交易次数</div>
        <div class="num">{{ debitCardAnalysis.totalCount }}<span>次</span></div>
      </div>
    </div>
    <div class="item" >
      <img src="@/static/images/ticketSum.png" alt="" />
      <div class="info-sum">
        <div class="title">总刷卡金额</div>
        <div class="num">{{ debitCardAnalysis.totalAmount }}<span>元</span></div>
      </div>
    </div>
  </div>


  <div></div>
</div>
<div style="margin:8px" v-show="listData.length>0">
    <button :type="firstType" style="margin-right:5px" size=mini @click="btFirstClick">POS机统计</button>
    <button :type="secondType" type="primary"  size=mini  @click="btSecondClick">近6月刷卡金额统计</button>
  </div>
    <u-list  v-show="!tabShow" @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
      <u-list-item v-for="(item, index) in listData" :key="index">
        <view class="list-item">
          <view class="item-header">
            <u--text  lines="2" 
              :text="item.nameCode" size="30rpx" color="#333333" :bold="true"></u--text>
          </view>
          <view class="item-row">
          <text class="row-label">今日交易次数：</text>
          <text class="row-value">{{ item.todayCount }} 次</text>
        </view>
        <view class="item-row">
          <text class="row-label">今日刷卡金额：</text>
          <text class="row-value">{{ item.todayAmount }} 元</text>
        </view>
        <view class="item-row">
          <text class="row-label">近7日交易次数：</text>
          <text class="row-value">{{ item.sevenDayCount }} 次</text>
        </view>
        <view class="item-row">
          <text class="row-label">近7日刷卡金额：</text>
          <text class="row-value">{{ item.sevenDayAmount }} 元</text>
        </view>
        <view class="item-row">
          <text class="row-label">近1月交易次数：</text>
          <text class="row-value">{{ item.oneMonthCount }} 次</text>
        </view>
        <view class="item-row">
          <text class="row-label">近1月刷卡金额：</text>
          <text class="row-value">{{ item.oneMonthAmount }} 元</text>
        </view>
        <view class="item-row">
          <text class="row-label">近3月交易次数：</text>
          <text class="row-value">{{ item.threeMonthCount }} 次</text>
        </view>
        <view class="item-row">
          <text class="row-label">近3月刷卡金额：</text>
          <text class="row-value">{{ item.threeMonthAmount }} 元</text>
        </view>
        <view class="item-row">
          <text class="row-label">近6月交易次数：</text>
          <text class="row-value">{{ item.sixMonthCount }} 次</text>
        </view>
        <view class="item-row">
          <text class="row-label">近6月刷卡金额：</text>
          <text class="row-value">{{ item.sixMonthAmount }} 元</text>
        </view>
        <view class="item-row">
          <text class="row-label">近1年交易次数：</text>
          <text class="row-value">{{ item.oneYearCount }} 次</text>
        </view>
        <view class="item-row">
          <text class="row-label">近1年刷卡金额：</text>
          <text class="row-value">{{ item.oneYearAmount }} 元</text>
        </view>
        <view class="item-row">
          <text class="row-label">近2年交易次数：</text>
          <text class="row-value">{{ item.twoYearCount }} 次</text>
        </view>
        <view class="item-row">
          <text class="row-label">近2年刷卡金额：</text>
          <text class="row-value">{{ item.twoYearAmount }} 元</text>
        </view>
        <view class="item-row">
          <text class="row-label">近5年交易次数：</text>
          <text class="row-value">{{ item.fiveYearCount }} 次</text>
        </view>
        <view class="item-row">
          <text class="row-label">近5年刷卡金额：</text>
          <text class="row-value">{{ item.fiveYearAmount }} 元</text>
        </view>
        <view class="item-row">
          <text class="row-label">总交易次数：</text>
          <text class="row-value">{{ item.totalCount }} 次</text>
        </view>
        <view class="item-row">
          <text class="row-label">总刷卡金额：</text>
          <text class="row-value">{{ item.totalAmount }} 元</text>
        </view>
        </view>
      </u-list-item>
      <view>
      </view>
    </u-list>
    <u-list v-show="tabShow"  @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
        <u-list-item v-for="(item, index) in secondListData" :key="index">
          <view class="list-item">
            <view class="item-header">
              <u--text  lines="2" 
                :text="item.pos+' 刷卡 '+item.amount+' 元'" size="30rpx" color="#333333" ></u--text>
            </view>

          </view>
        </u-list-item>
        <view>
        </view>
      </u-list>
    <u-picker itemHeight="88" :show="settingPickShow" :columns="settingColumns" keyName="settingName"
      @confirm="settingConfirm" @cancel="settingCancel"></u-picker>
  </view>
  <!-- 悬停按钮返回工作台-->
    <suspend></suspend>
    <refresh></refresh>
</template>

<script setup>
import { getPosStatics } from '@/api/invest/statisticAnalysis'
import { getDicts } from '@/api/system/dict/data.js'
import {onLoad,onShow} from "@dcloudio/uni-app";
import auth from "@/plugins/auth"; // 建议使用auth进行鉴权操作
    // 计算属性与监听属性是在vue中而非uniap中 需要注意！！！
import {reactive ,toRefs,ref,computed }from "vue";
const listData = ref([])
const isShow = ref(false)
const settingPickShow = ref(false)
const settingColumns = ref([])

const tabShow = ref(false)
const firstType = ref("primary")
const secondType = ref("default")
const secondListData = ref([])

const debitCardAnalysis = ref({})
const data = reactive({
  filterPanel: false,
  queryParams: {
  type: 1,
  time: null,
  dataType: null,
  id: null
   } 
})
const { filterPanel, queryParams} = toRefs(data)
const windowHeight = computed(() => {
            uni.getSystemInfoSync().windowHeight - 50
        })	
onLoad(() => {
    getList()
  });

 onShow(() => {
    if (isShow.value) {
    listData.value=[]
      getList()
      isShow.value = false
    }
  });

  function   btFirstClick() {
    tabShow.value=false
    firstType.value="primary"
    secondType.value="default"

      }
      function  btSecondClick() {
        secondType.value="primary"
         firstType.value="default"
        tabShow.value=true
        
    }

function getList() {
      getPosStatics({...queryParams.value }).then(res => {
          debitCardAnalysis.value = { ...res.data }
          secondListData.value=[]
          listData.value=[]
        listData.value = listData.value.concat(res.data.posTableList)
        secondListData.value = secondListData.value.concat(res.data.posList)
      }).catch(() => {
      })
    }
function settingConfirm(e) {
      queryParams.value.settingId = e.value[0].settingId
      queryParams.value.settingName = e.value[0].settingName
      settingPickShow.value = false
    }
function settingCancel() {
      settingPickShow.value = false
    }

</script>

<style lang="scss" scoped>

.app-container {
.header-con {
  width: 100%;
  height: 100px;
  background-color: #ffffff;
  margin-bottom: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .item {
    width: 50%;
    height: 100%;
    display: flex;
    position: relative;
    align-items: center;
    margin: 5px 10px 5px 10px;
    .title {
      margin-left: 5px;
      color: rgb(133, 133, 148);
      margin-bottom: 5px;
      font-size: 14px;
    }
    .num {
      margin-left: 5px;
      font-weight: bold;
      font-size: 14px;
    }
  }
  img {
    height: 30px;
    width: 30px;
  }
}
.header-title {
  width: 100%;
  height: 30px;
  background-color: #ffffff;
  margin-bottom: 3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
}
}
.btnAdd {
      width: 146rpx;
      height: 56rpx;
      line-height: 56rpx;
      border-radius: 8rpx;
      display:float;
      text-align: center;
    }

.search-view {
  padding: 12rpx 32rpx;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;

  .search-input {
    background: #F5F5F5;
    color: #333333;
    margin-right: 36rpx;
  }

  .filter-panel {
    width: 100%;
    position: absolute;
    left: 0;
    top: 96rpx;
    background-color: rgba(0, 0, 0, 0.5);

    .filter-panel-content {
      background-color: #ffff;
      padding: 0 30rpx 30rpx;

      .filter-title {
        color: #000000;
        font-size: 30rpx;
        font-weight: 500;
        padding: 30rpx 0;
      }

      .state-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;

        .state-item {
          width: 210rpx;
          height: 72rpx;
          border: 1rpx solid rgba(0, 0, 0, 0.25);
          border-radius: 72rpx;
          text-align: center;
          line-height: 72rpx;
          margin: 0 20rpx 20rpx 0;
          font-size: 28rpx;
          color: #000000;
        }

        .active {
          background-color: rgba(222, 241, 255, 1);
          border: 1rpx solid rgba(22, 119, 255, 1);
        }
      }
    }

    .btn-box {
      display: flex;
      padding: 24rpx 30rpx;
      background-color: #fff;
      box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
    }
  }
}

.list-item {
  margin: 0 24rpx 24rpx;
  padding: 32rpx;
  background-color: #fff;

  .item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16rpx;

    .status {
      .status-item {
        width: 120rpx;
        height: 44rpx;
        text-align: center;
        line-height: 44rpx;
        border-radius: 4rpx;
        font-size: 24rpx;
      }

      .status1 {
        background: #F0F0F0;
        color: #8C8C8C;
      }

      .status2 {
        background: rgba(38, 129, 255, 0.2);
        color: #2681FF;
      }

      .status3 {
        background: #F7F7F7;
        color: #2681FF;
      }

      .status4 {
        background: rgba(255, 85, 51, 0.2);
        color: #FF5533;
      }

      .status5 {
        background: #F7F7F7;
        color: rgba(0, 0, 0, 0.85);
      }

      .status7 {
        background: rgba(255, 129, 51, 0.2);
        color: #FF8133;
      }

      .status8 {
        background: rgba(65, 217, 165, 0.2);
        color: #41D9A5;
      }
    }
  }

  .item-row {
    padding: 16rpx 0;

    .row-label {
      color: rgba(0, 0, 0, 0.55);
    }

    .row-value {
      color: rgba(0, 0, 0, 0.85)
    }
  }

  .operate {
    display: flex;
    justify-content: flex-end;

    .btn {
      width: 146rpx;
      height: 56rpx;
      line-height: 56rpx;
      border-radius: 8rpx;
      margin-left: 5rpx;
      text-align: center;
    }

    .circulation {
      background: rgba(0, 0, 0, 0.04);
      margin-right: 24rpx;
      color: rgba(0, 0, 0, 0.85);
    }

    .filling {
      background: #2681FF;
      border-radius: 8rpx;
      color: #FFFFFF;
    }
  }
}
</style>